<template>
  <div class="navbar">
      <router-link :class="{active:isactive == 'recommend'}" :to="{ path: 'home', query: { type: 'recommend' }}" tag="span">个性推荐</router-link>
      <router-link :class="{active:isactive == 'songsheet'}" :to="{ path: 'home', query: { type: 'songsheet' }}" tag="span">歌单</router-link>
      <router-link :class="{active:isactive == 'radiostation'}" :to="{ path: 'home', query: { type: 'radiostation' }}" tag="span">个性电台</router-link>
      <router-link :class="{active:isactive == 'rankinglist'}" :to="{ path: 'home', query: { type: 'rankinglist' }}" tag="span">排行榜</router-link>
  </div>
</template>
<script>
export default {
  name: "Navber",
  computed: {
    isactive() {
      return this.$route.query.type;
    }
  }
};
</script>
<style lang="less">
.navbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  span {
    width: 25%;
    text-align: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
  }
  .active {
    border-bottom: 1px solid red;
    color: red;
  }
}
</style>


